<template>
   <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 总览 -->
            <el-row :gutter="20" style="margin: 10px;">
                <el-col :span="5">
                    <div>
                        <el-statistic group-separator="," :value="synopsis.totalUserCount" title="用户总数"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-statistic group-separator="," :value="synopsis.todayUserCount" title="今日注册用户"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-statistic group-separator="," :precision="2" decimal-separator="." :value="synopsis.todayTurnover" title="今日营业额">
                            <template slot="prefix">
                                <i class="el-icon-s-flag" style="color: red"></i>
                            </template>
                            <template slot="suffix">
                                <i class="el-icon-s-flag" style="color: blue"></i>
                            </template>
                        </el-statistic>
                    </div>
            
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-statistic group-separator="," :precision="2" decimal-separator="." :value="synopsis.weekTurnover" title="最近一周营业额"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-statistic group-separator="," :precision="2" decimal-separator="." :value="synopsis.monthTurnover" title="最近一月营业额"></el-statistic>
                    </div>
                </el-col>
            </el-row>

            <!-- 排行榜 -->
            <!-- <el-row :gutter="20" style="margin: 10px;">
                <el-col :span="12">
                    排行榜1
                </el-col>
                <el-col :span="12">
                    排行榜2
                </el-col>
            </el-row> -->

            <!-- 营业额和销量分布统计 -->
            <el-row :gutter="20" style="margin-top: 100px;">
                <el-col :span="16">
                    <div ref="turnoverChartRef" style="width:100%;height:400px"></div>
                </el-col>
                <el-col :span="8">
                    <div ref="salesDistributionPieRef" style="width:100%;height:400px;"></div>
                </el-col>
            </el-row>
        </el-card>
   </div> 
</template>
<script>
import '../plugins/echarts'

export default {
    data() {
        return {
            //数据总览
            synopsis: {
                totalUserCount: 0,
                todayUserCount: 0,
                todayTurnover: 0,
                weekTurnover: 0,
                monthTurnover: 0
            },
            //营业额图表年份
            turnoverChartYear: 0
        }
    },
    created() {
        //获取总览数据
        this.getSynopsis();
    },
    mounted() {
        //渲染营业额统计图
        this.renderTurnoverChart();
        //渲染销量分布饼图
        this.renderSalesDistributionPie();
    },
    methods: {
        //获取总览数据
        getSynopsis(){
            this.$axios.get('/statistics/synopsis')
            .then(res => {
                const data = res.data;
                if(data.code != '001') return this.$notifyError(data.message);
                this.synopsis = data.data;
            })
            .catch(err => {
                console.log(err);
            })
        },
        //渲染营业额统计图
        renderTurnoverChart() {
            //发送请求，渲染数据
            this.$axios.get('/statistics/monthlyTurnover')
            .then(res => {
                const data = res.data;
                if(data.code != '001') return this.$notifyError(data.message);
                const turnoverChartVo = data.data.turnoverChartVo;
                let option = {
                    title: {
                        text: data.data.year + '年每月营业额情况',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: turnoverChartVo.abbrEnglishMonth
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        type: 'line',
                        data: turnoverChartVo.monthlyTurnoverData
                        }
                    ]
                };
                this.turnoverChartYear = data.data.year;
                const turnoverChartRef = this.$refs.turnoverChartRef
                const turnoverChart = this.$echarts.init(turnoverChartRef)
                option && turnoverChart.setOption(option);
            })
            .catch(err => {
                console.log(err);
            })
            
        },
        //渲染销量分布饼图
        renderSalesDistributionPie(){
            //发送请求，渲染数据
            this.$axios.get('/statistics/salesDistribution')
            .then(res => {
                const data = res.data;
                if(data.code != '001') return this.$notifyError(data.message);
                const pieDataVos = data.data.pieDataVos;
                let option = {
                    title: {
                        text: '销量分布情况',
                        subtext: 'data source system',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '数据明细',
                            type: 'pie',
                            radius: '50%',
                            data: pieDataVos,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                const salesDistributionPieRef = this.$refs.salesDistributionPieRef
                const salesDistributionPie = this.$echarts.init(salesDistributionPieRef)
                option && salesDistributionPie.setOption(option);

            })
            .catch(err => {
                console.log(err);
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>